<template>
  <view>
    <view v-if="paramData != undefined">
      <!-- @tap="tapItemOne(paramData)" 收起功能暂时不要了 -->
      <view class="item-box" :style="{ 'padding-left': 35 * parseInt(currentLayer) + 'rpx' }"
        @click="clickItem(paramData)">
        <view>{{ paramData[title] }}</view>
        <view class="flex">
          <clIcon v-if="!paramData.hasOwnProperty('isDelectIcon') || paramData.isDelectIcon === true" @click="delectItem(paramData)" class="m-t-30 m-r-40" type="icon-shanchu" color="#000" size="20">
          </clIcon>
          <clIcon v-if="!paramData.hasOwnProperty('isAddIcon') || paramData.isAddIcon === true" @click="addItem(paramData)" class="m-t-30" type="icon-24gl-plusCircle" color="#000" size="20"></clIcon>
        </view>
      </view>
      <!-- 控制树结构是否可以收缩  传入的数据中传入show = true  和 created即可-->
      <!-- <view
        v-if="paramData[children] != undefined && paramData.created"
        v-show="paramData.show"
      > -->
      <view v-if="paramData[children] != undefined">
        <view v-for="(item, index) in paramData[children]" :key="currentLayer + index">
          <cx-tree-list-item @parentEmit="parentEmit" :parentData="paramData" :layer="currentLayer + 1"
            :style="{ 'padding-left': 10 }" @clickItem="clickItem" @addItem="addItem" @delectItem="delectItem"
            :paramData="item">
          </cx-tree-list-item>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import clIcon from "@/components/cl-icon/cl-icon.vue";
export default {
  name: "cx-tree-list-item",
  components: {
    clIcon,
  },
  data() {
    return {
      currentLayer: 0, //当前层级
    };
  },
  props: {
    paramData: {
      type: Object,
      default: undefined,
    },
    layer: {
      type: [Number, String],
      default: 1,
    },
    parentData: {
      type: Object,
      default: undefined,
    },
    title: {
      type: String,
      default: "name",
    },
    children: {
      type: String,
      default: "children",
    },
  },
  watch: {
    layer: {
      handler(newValue, oldValue) {
        if (oldValue == undefined) newValue = parseInt(newValue) - 1;
        this.currentLayer = parseInt(newValue) + 1;
      },
      immediate: true,
    },
  },

  methods: {
    /**
      * @description: 获取当前点击的数据
      * @param {object} 当前的对象
      * @return {object} 返回当前的对象
    */
    clickItem(item, i) {
      this.$emit("clickItem", item);
    },
    /**
      * @description: 触发删除事件
      * @param {object} 当前的对象
      * @return {object} 返回当前的对象
    */
    delectItem(item) {
      this.$emit("delectItem", item);
    },
    /**
      * @description: 触发新增事件
      * @param {object} 当前的对象
      * @return {object} 返回当前的对象
    */
    addItem(item) {
      this.$emit("addItem", item);
    },
    tapItemOne(item_one) {
      // console.log("item_one", item_one);
      return;
      if (item_one.children == undefined) {
        this.$emit("tapTitle", item_one);
        return;
      }

      item_one.show = item_one.show == undefined ? true : !item_one.show;
      if (item_one.show && item_one.created == undefined) {
        item_one.created = true;
      }
      this.$forceUpdate();
    },

    parentEmit() {
      if (this.parentData != undefined) {
        let allChecked = true;
        this.parentData.children.forEach((item) => {
          if (!item.checked) allChecked = false;
        });
        let parentName = this.parentData.name;
        this.parentData.name = "";
        this.parentData.name = parentName;
        this.parentData.checked = allChecked;
        this.$emit("parentEmit");
      }
    },

    //选中处理
    setChecked(item_one) {
      let name = item_one.name;
      item_one.name = "";
      item_one.name = name;
      item_one.checked =
        item_one.checked == undefined ? true : !item_one.checked;
      this.recursionChecked(item_one, item_one.checked);
      if (this.parentData != undefined) {
        let allChecked = true;
        this.parentData.children.forEach((item) => {
          if (!item.checked) allChecked = false;
        });
        let parentName = this.parentData.name;
        this.parentData.name = "";
        this.parentData.name = parentName;
        this.parentData.checked = allChecked;
        this.$emit("parentEmit");
      }
    },
    recursionChecked(item_one, checked) {
      if (item_one.children == undefined) return;
      item_one.children.forEach((item, index) => {
        let name = item.name;
        item.name = "";
        item.name = name;
        item.checked = checked;
        this.recursionChecked(item, checked);
      });
    },
  },
};
</script>

<style scoped>
.item-box {
  display: flex;
  align-items: center;
  min-height: 60rpx;
  position: relative;
  justify-content: space-between;
}

.image-box {
  position: absolute;
  right: 15rpx;
  width: 45rpx;
  height: 45rpx;
}

.arrow-down-css {
  width: 30rpx;
  height: 30rpx;
  margin-right: 1rpx;
  transform: rotate(90deg);
}

.arrow-right-css {
  width: 30rpx;
  height: 30rpx;
  margin-right: 1rpx;
}
</style>